<template>

    <el-skeleton :loading="loading" animated>

        <template slot="template">
            <div id="container">
                <div class="main">
                    <el-skeleton-item variant="text" style=" height: 240px;"/>

                    <div class="breadcrumb">
                        <el-skeleton-item variant="text" style=" height: 40px;"/>
                    </div>
                    <el-skeleton-item variant="text" style=" height: 190px;"/>

                    <div class="breadcrumb">
                        <el-skeleton-item variant="text" style=" height: 40px;"/>
                    </div>
                    <el-skeleton-item variant="text" style=" height: 190px;"/>
                    <div class="breadcrumb">
                        <el-skeleton-item variant="text" style=" height: 40px;"/>
                    </div>
                    <el-skeleton-item variant="text" style=" height: 190px;"/>
                </div>

                <div class="sidebar">

                    <el-skeleton-item variant="text" style=" height: 240px;"/>
                    <el-skeleton-item variant="text" style=" height: 240px;"/>


                </div>

            </div>


        </template>
        <template>
            <div id="container">
                <div class="main ">
                    <el-carousel>
                        <el-carousel-item v-for="(item,index) in banner" :key="index">
                            <el-image :src="doUrl(item.image)" fit="contain" @click="jumpTo('banner',item.url)"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
                    <!--<ArticleList :list="article"></ArticleList>-->
                    <!--<div class="breadcrumb">-->
                    <!--<a href="#" title="博客吧">首页</a> &raquo;-->
                    <!--</div>-->
                    <!--<div class="blogItem fade-in-top " v-for="(item,index) in article" :key="index"-->
                    <!--@click="jumpTo(index)"-->
                    <!--:style="{animationDelay:index*0.1+'s'}">-->
                    <!--<h2><a title="" target="_blank"> {{item.title}}</a></h2>-->
                    <!--<div class="postmeta" v-if="item">-->
                    <!--<span class="date">{{(item.inputtime*1000)}}</span>-->
                    <!--<span class='tags'><a rel="tag">{{item.flag}}</a></span>-->
                    <!--<span class="views">{{item.click}} ℃</span>-->
                    <!--</div>-->
                    <!--<div class="homeentry box">-->
                    <!--<div class="intro nr" v-html="item.description">-->
                    <!--</div>-->
                    <!--<div class="more"><a title=" " target="_blank">阅读全文</a></div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!---->

                    <!--<div class="bottom " v-if="page.isBottom">-->
                    <!--<i class="el-icon-loading"></i>-->
                    <!--<span class="text-gray" style="font-size: 0.9em">{{page.bottomTitle}}</span>-->
                    <!--</div>-->

                </div>
                <div class="sidebar">
                    <Rank></Rank>
                    <Tag></Tag>
                </div>
            </div>

        </template>

    </el-skeleton>


</template>

<script type="text/javascript">

  import Tag from '../public/tag.vue'
  import Rank from '../public/rank.vue'
  import ArticleList from '../../components/article/article-list'
  import {changeUrl, ceshi} from '../../utils/common.js'

  export default {
    name: 'home',
    components: {
      Tag, Rank, ArticleList
    },
    data () {
      return {
        content: [],
        article: [],
        loading: true,
        page: {
          lastPage: 0,
          currentPage: 1,
          isBottom: false,
          bottomTitle: ''
        },
        banner: [],
        count: 10

      }
    },
    metaInfo: {
      title: '橙汁社区',
      meta: [
        {
          name: 'description',
          content: '个人日记文档',
        },
        {
          name: 'keywords',
          content: '博客，生活'
        }
      ]
    },
    provide () {
      return {
        handleUrl: this.doUrl
      }

    },
    mounted () {
      this.loadData()
      this.getArticleList()
    },
    methods: {
      loadData () {
        console.log('加载')
        this.$http({
          url: 'getBanner',
          params: {
            type: 1,
          }
        }).then(res => {
          this.loading = false
          this.banner = res.code === 200 ? res.data : []

        })
      },
      /**
       * 获取文章列表
       * */
      getArticleList () {
        this.$http({
          url: 'getArticleList',
          params: {
            type: 1,
            per_page: 10,
            current_page: 1,
          }
        }).then(res => {
          console.log('res', res.data.data)
          this.article = res.code === 200 ? res.data.data : []

        })

      },

      doUrl (url) {
        return changeUrl(url)
      },
      backTop () {
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0

      },
      /**
       * 时间格式转换
       */
      changeTime (time) {

        return CON.changeTime(time)
      },

      demo () {

        this.$router.push({name: 'login'})

      },
      /**
       * 下一页
       * */
      nextPage () {
        this.page.currentPage++
        this.getAritle()
      },
      /**
       * 指定页数
       * */
      appiontPage (index) {
        this.page.currentPage = index + 1
        this.getAritle()
      },
      /**
       * 跳转
       * */
      jumpTo (...dat) {
        console.log('jump',dat[1]);
        this.$router.push({path: dat[1]});
        // switch (dat[0]) {
        //   case 'banner':
        //     let url = dat[1]
        //     url.indexOf('http') === -1 ? (() => {
        //       console.log('内部链接')
        //       this.$router.push({path: url})
        //     })() : (() => {
        //        window.open(url);
        //     })();
        //     break
        // }
        // console.log('id', this.content[index].id)
        // let id = window.btoa(this.content[index].id)
        // console.log('id' + id)
        // this.$router.push({path: '/content', query: {id: id}})
      },

      /**
       *
       */
      getAritle () {
        this.$request.request('getAritle', 'get', {
          page: this.page.currentPage,
          num: 10,
          keywords: '',
          catid: '',

        }).then(res => {

          if (this.page.currentPage == 1) {
            this.content = []
          }
          this.content = this.content.concat(res.data.data)
          this.$forceUpdate()
          this.page.currentPage++
        })

      }

    }
  }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
